import React from "react";
import {Card, Col, PageHeader, Row, Typography} from "antd";

import BaseComponent from "../../redare/components/BaseComponent";
import UserPresenter from "../../.gen/presenter/UserPresenter";
import WebWorkbenchPresenter from "../../.gen/presenter/WebWorkbenchPresenter";
import {WebPage} from "../../redare_components/webplatform_workbench/utils/WorkbenchDecoratorUtil";
import ModifyEmailModal from "../../components/setting/personal/ModifyEmailModal";
import ModifyPasswordModal from "../../components/setting/personal/ModifyPasswordModal";

const {Text} = Typography;
const routes = [
    {
        path: 'index',
        breadcrumbName: '工作台',
    },
    {
        breadcrumbName: '个人设置',
    },
];

export default @WebPage({
    id: 'com.redare.devframework.webplatform.pages.setting.PersonalPage',
    classify: '个人设置',
    name: '系统设置',
    webPath: '/setting/personal',
    webFunIds: [
        "editUser",
        "updateUserPwd",
    ]
})

class PersonalPage extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = {
            user: {}
        };
        this.userPresenter = new UserPresenter(this);
        this.workbenchPresenter = new WebWorkbenchPresenter(this);
        this.registerEventListener('edit-email-success-callback', () => this.loadLoginUserInfo())
    }

    componentDidMount() {
        this.loadLoginUserInfo()
    }

    loadLoginUserInfo() {
        this.workbenchPresenter.getLoginUser(
            {},
            (result) => {
                this.setState({user: result.data});
            }
        )
    }

    //点击弹出编辑邮箱
    handleEditEmail() {
        if (this.emailModal) {
            this.emailModal._show(this.state.user);
        }
    }

    handleEditPassword() {
        if (this.passwordModal) {
            this.passwordModal._show(this.state.user)
        }
    }

    render() {
        let {user} = this.state;
        if (!user) {
            return null
        }
        return (
            <div className="Profile-Page">
                <PageHeader className="page-breadcrumb" title="个人设置" breadcrumb={{routes}}/>
                <Card bordered={false} className="fixed-top padding">
                    <dl className="marginBot24">
                        <dt><h3>基础信息</h3></dt>
                        <dd>
                            <div><Text strong>账户</Text></div>
                            <div><Text type="secondary">{user.account}</Text></div>
                        </dd>
                        <dd>
                            <div><Text strong>姓名</Text></div>
                            <div><Text type="secondary">{user.name}</Text></div>
                        </dd>
                        <dd>
                            <div><Text strong>所属部门</Text></div>
                            <div><Text type="secondary">盛云科技有限公司</Text></div>
                        </dd>
                        <dd>
                            <Row justify="space-between" align="middle">
                                <Col>
                                    <div><Text strong>邮箱</Text></div>
                                    <div><Text type="secondary">{user.email}</Text></div>
                                </Col>
                                <Col>
                                    <a onClick={() => this.handleEditEmail()}>修改</a>
                                </Col>
                            </Row>
                        </dd>
                    </dl>
                    <dl>
                        <dt><h3>安全设置</h3></dt>
                        <dd>
                            <Row justify="space-between" align="middle">
                                <Col>
                                    <div><Text strong>账户密码</Text></div>
                                    <div><Text type="secondary">******</Text></div>
                                </Col>
                                <Col>
                                    <a onClick={() => this.handleEditPassword()}>修改</a>
                                </Col>
                            </Row>
                        </dd>
                    </dl>
                </Card>
                <ModifyEmailModal ref={(o) => this.emailModal = o}/>
                <ModifyPasswordModal ref={(o) => this.passwordModal = o}/>
            </div>
        )
    }
}